import React, { Component } from 'react'
import { Button, Select } from 'antd'
import { connect } from 'dva';
import api from '@/api';
const { Option } = Select;

@connect(({shopaccount})=>({
    airports: shopaccount.airports
}))
class AreaSearch extends Component {
    state = {
        countryName: '',
        cityName: '',
        countries: [],
        cities: [],
    }
    handleCountryChange = (value)=> {
        const arr = value.split(',')
        this.queryAirportByCountryName(arr[0])
        this.queryCitys(+arr[1])
        this.setState({
            countryName: value,
            cityName: ''
        })
    }
      
    handleCityChange = (value)=> {
        console.log(`selected ${value}`);
        this.queryAirportByCityName(value)
        this.setState({
            cityName: value
        })
    }

    // 重置
    reset = ()=>{
        this.setState({
            countryName: '中国(CN)',
            cityName: '',
        })
        this.queryAirportByCountryName()
    }
    // 查询国家
    queryCountry=()=>{
        api.shopInfo.queryCountryList({
            data: {
                pageIndex: 1,
                pageSize: 300
            }
        }).then(res => {
            if ( res && res.code === 200) {
                this.setState({
                    countries: res.data.list
                })
            }
        })
    }
    // 查询城市
    queryCitys = (val)=>{
        api.shopInfo.queryCityList({
            data: {
                id: val
            } 
        }).then(res => {
            if ( res && res.code === 200) {
                this.setState({
                   cities: res.data
                })
            }
        })
    }

    queryAirportByCountryName = (name='中国')=>{
        const { dispatch } = this.props
        dispatch({
            type: 'shopaccount/getAirportsByCountry',
            payload: {
                data: { country: name }
            }
        })
    }
    queryAirportByCityName = (name)=>{
        const { dispatch } = this.props
        dispatch({
            type: 'shopaccount/getAirportsByCity',
            payload: {
                data: { city: name }
            }
        })
    }
    componentDidMount(){
        this.queryCountry()
        this.queryCitys(1)
        this.queryAirportByCountryName()
        this.setState({
            countryName: '中国(CN)'
        })
    }
    render() {
        const { countries, cities, countryName, cityName } = this.state
        return (
            <div style={{width: '180px',height: '571px',border: '1px solid #d9d9d9',marginRight:'40px', borderRadius:'4px',padding: '12px'}}>
                <p>首先在本栏选择分区所在范围，然后在待选区查看选择</p>
                <Select
                    style={{width: '100%'}}
                    showSearch
                    placeholder="请选择国家"
                    optionFilterProp="children"
                    onChange={this.handleCountryChange}
                    value={countryName}
                    filterOption={(input, option) =>
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {countries.map(val => <Option key={val.id} value={val.name +','+ val.id}>{`${val.name}(${val.code})`}</Option>)}
                </Select>
                <Select
                    style={{width: '100%',marginTop: '15px'}}
                    showSearch
                    placeholder="请选择城市"
                    optionFilterProp="children"
                    onChange={this.handleCityChange}
                    filterOption={(input, option) =>
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    // disabled={!this.state.canSelect}
                    value={cityName}
                >
                    {cities.map(val => <Option key={val.id} value={val.name}>{val.name}</Option>)}
                </Select>
                <div style={{textAlign: 'right',marginTop: '15px'}}>
                    <Button onClick={this.reset} size="small" type="primary" style={{fontSize: '12px'}}>重置</Button>
                </div>
               
            </div>
        )
    }
}
export default AreaSearch